import React from "react";
import { Component } from "react";
import Table from "uxcore-table";
import moment from "moment";
import { imgReady } from "../../const.js";
import "./SmrzDialog.less";

export default class SmrzDialog extends Component {
  constructor(props) {
    super(props);
  }

  handlePagerChange(current, pageSize) {
    const { onPageChange } = this.props;
    if (onPageChange) {
      const {
        data: { key },
      } = this.props;
      onPageChange(key, current, pageSize);
    }
  }

  handlePhotoClick(url) {
    const { onPhotoClick } = this.props;
    if (onPhotoClick) {
      imgReady(url, function () {
        onPhotoClick({ url, whRate: this.width / this.height });
      });
    }
  }

  render() {
    const {
      data: { key, jsxdata, pageSize, dataLoading },
    } = this.props;

    const columns =
      key === "TWSB" || key === "TWYC"
        ? [
            // 所属项目、所属企业、姓名、身份证号码、性别、温度、上传时间
            {
              dataKey: "engName",
              title: "所属项目",
              width: 200,
            },
            {
              dataKey: "organName",
              title: "所属企业",
              width: 200,
            },
            {
              dataKey: "name",
              title: "姓名",
              width: 100,
            },
            {
              dataKey: "idCardNumber",
              title: "身份证号码",
              width: 120,
              render: (idNumber) =>
                idNumber &&
                idNumber.replace(/(\d{4})\d{10}(\d{4})/g, "$1****$2"),
            },
            {
              dataKey: "sex",
              title: "性别",
              width: 100,
              render: (sex) => {
                if (sex === 1) {
                  return "男";
                } else if (sex === 0) {
                  return "女";
                } else {
                  return "未知";
                }
              },
            },
            {
              dataKey: "tempera",
              title: "温度",
              width: 100,
            },
            {
              dataKey: "jlrq",
              title: "上传时间",
              width: 200,
            },
          ]
        : [
            {
              dataKey: "name",
              title: "姓名",
              width: 100,
            },
            {
              dataKey: "idCardNumber",
              title: "身份证号码",
              width: 120,
              render: (idNumber) =>
                idNumber &&
                idNumber.replace(/(\d{4})\d{10}(\d{4})/g, "$1****$2"),
            },
            {
              dataKey: "sex",
              title: "性别",
              width: 100,
              render: (sex) => {
                if (sex === 1) {
                  return "男";
                } else if (sex === 0) {
                  return "女";
                } else {
                  return "未知";
                }
              },
            },
            {
              dataKey: "cellPhone",
              title: "手机号码",
              width: 120,
              render: (cellPhone) =>
                cellPhone &&
                cellPhone
                  .replace(/\s+/g, "")
                  .replace(/(\d{3})\d{4}(\d{4})/g, "$1****$2"),
            },
            {
              dataKey: "organName",
              title: "所属企业",
              width: 250,
            },
            {
              dataKey: "createTime",
              title: "加入时间",
              width: 200,
              render: (createTime) =>
                createTime && moment(createTime).format("YYYY-MM-DD HH:mm:ss"),
            },
            {
              dataKey: "avatar",
              title: "照片",
              width: 200,
              render: (avatar) =>
                avatar && (
                  <div>
                    <img
                      src={`data:image/jpeg;base64,${avatar}`}
                      width={40}
                      style={{ cursor: "pointer" }}
                      onClick={() =>
                        this.handlePhotoClick(
                          `data:image/jpeg;base64,${avatar}`
                        )
                      }
                    />
                  </div>
                ),
            },
          ];

    return (
      <div className="smrz-dialog-content">
        <div className="smrz-dialog-table">
          <Table
            showMask={dataLoading}
            height={640}
            showPager
            showHeaderBorder
            pageSize={pageSize}
            showPagerTotal
            showColumnPicker={false}
            className="kuma-uxtable-split-line"
            jsxcolumns={columns}
            jsxdata={jsxdata}
            onPagerChange={(current, pageSize) => {
              this.handlePagerChange(current, pageSize);
            }}
          />
        </div>
      </div>
    );
  }
}
